<template>
    <!-- 过渡动画 -->
    <transition name="fade">
        <div class="img-view" @click="bigImg">
            <!-- 遮罩层 -->
            <div class="img-layer"></div>
            <ul class="img" >
               <li><img :src="imgSrc" ref="imgs"></li>
            </ul>
        </div>
    </transition>
</template>
<script>
import {prefixStyle} from 'common/js/dom'
const transform = prefixStyle('transform')
export default {
  props: ['imgSrc'],
  methods: {
    bigImg () {
      // 发送事件
      this.$emit('clickit')
    },
    cal () {
      const imgy = this.$refs.imgs.offsetHeight
      console.log(imgy)
      const y = (window.innerHeight / 2 - imgy / 2)
      this.$refs.imgs.style[transform] = `translate3d(0, ${y}px, 0)`
    }
  },
  mounted () {
    this.cal()
    console.log(this.$refs.imgs.offsetHeight)
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" >
.fade-enter-active,.fade-leave-active
  transition: all .2s linear
  transform: translate3D(0, 0, 0)
.fade-enter,.fade-leave-active
  transform: translate3D(100%, 0, 0)
.img-view
  top: 0;
  right: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 22;

  .img-layer
    position: fixed
    transform-origin: left top 0
    top: 0
    left: 0
    background: rgba(0, 0, 0, 0.7)
    width: 100%
    height: 100%
    overflow: hidden
    right: 0
  .img
    top: 0;
    right: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    text-align:center
    li
      img
        max-width: 100%
        max-height: 100%

</style>
